<template>

    <view>
        <view>
            <view v-if="isCanUse">
                <view>
                    <view class='header'>
                        <img src="/static/images/ic_launcher.png">
                    </view>
                    <view class='content'>
                        <view>申请获取以下权限</view>
                        <text>获得你的公开信息(昵称，头像、地区等)</text>
                    </view>
              
                    <button class='bottom' type='primary' open-type="getUserInfo" withCredentials="true" lang="zh_CN"
                        @getuserinfo="wxGetUserInfo">
                        授权登录
                    </button>
              
                
                </view>
            </view>
        </view>
        <canvas class="myCanvas" canvas-id="myCanvas">

            <!-- 消息提示 -->
            <uni-popup id="popupMessage" ref="popupMessage" type="message">
                <uni-popup-message :type="msgType" :message="message" :duration="2000"></uni-popup-message>
            </uni-popup>

    </view>

</template>
<script>
    import common from '@/common/common.js';
    import uniPopupMessage from '@/components/uni-popup/uni-popup-message.vue'
    export default {
        data() {
            return {
                type: 'top',
                msgType: 'success',
                message: '这是一条成功消息提示',

                title: '温馨提示',
                SessionKey: '',
                openid: '',
                nickName: '',
                avatarUrl: '',
                unionid: '',
                isCanUse: uni.getStorageSync('isCanUse1') || true//默认为true
            };
        },
        methods: {
   
            
            //第一授权获取用户信息===》按钮触发
            wxGetUserInfo() {
                var _this = this;
                console.log(_this.URLs);
                uni.getUserInfo({
                    provider: 'qq',
                    success: function (infoRes) {
                        console.log(infoRes);
                        _this.nickName = infoRes.userInfo.nickName; //昵称
                        _this.avatarUrl = infoRes.userInfo.avatarUrl; //头像
                        try {
                            uni.setStorageSync('isCanUse1', false);//记录是否第一次授权  false:表示不是第一次授权
                            _this.updateUserInfo(_this);
                        } catch (e) { }
                    },
                    fail(res) { }
                });
            },　　　　　　//登录
            login() {
                var _this = this;


                // 1.wx获取登录用户code
                uni.login({
                    provider: 'qq',
                    success: function (loginRes) {
                        console.log(loginRes);
                        let code = loginRes.code;


                        // #ifdef MP-QQ 
                        if (!_this.isCanUse) {
                            //非第一次授权获取用户信息
                            uni.getUserInfo({
                                provider: 'qq',
                                success: function (infoRes) { 　　　　　　　　　　　　　　　　　　　　　　//获取用户信息后向调用信息更新方法
                                    _this.nickName = infoRes.userInfo.nickName; //昵称
                                    _this.avatarUrl = infoRes.userInfo.avatarUrl; //头像
                                    _this.updateUserInfo(_this);//调用更新信息方法
                                }
                            });
                        }
                        // #endif
                        // #ifdef MP-WEIXIN 
                        if (!_this.isCanUse) {
                            //非第一次授权获取用户信息
                            wx.getUserProfile({
                                provider: 'wx',
                                success: function (infoRes) { 　　　　　　　　　　　　　　　　　　　　　　//获取用户信息后向调用信息更新方法
                                    _this.nickName = infoRes.userInfo.nickName; //昵称
                                    _this.avatarUrl = infoRes.userInfo.avatarUrl; //头像
                                    _this.updateUserInfo(_this);//调用更新信息方法
                                }
                            });
                        }
                        // #endif

                        let data = { code: code };
                        //#ifdef MP-WEIXIN 
                        common.requst(_this.URLs + '/api/applets/getUserWXLoginInfo', data, 'get').then(res => {
                            console.log('返回数据', res);
                            if (res.statusCode == 200) {
                                if (res.data.success) {
                                    _this.openid = res.data.data.openid;
                                    _this.unionid = res.data.data.unionid;
                                    uni.setStorageSync('openid', _this.openid);
                                    console.log(_this);
                                }
                            }


                        });
                        // #endif
                        // #ifdef MP-QQ 
                        //2.将用户登录code传递到后台置换用户SessionKey、OpenId等信息
                        common.requst(_this.URLs + '/api/applets/qqlogin', data, 'get').then(res => {
                            console.log('返回数据', res);
                            _this.openid = res.data.openid;
                            _this.unionid = res.data.unionid;
                            console.log(_this);

                        });

                        //#endif
                    },
                });
            },
            onShareAppMessage: function () {
                qq.showShareMenu({
                    showShareItems: ['qq', 'qzone', 'wechatFriends', 'wechatMoment']
                })
            },
            //向后台更新信息
            updateUserInfo(_this) {
                var type = null;
                // #ifdef MP-QQ 
                type = "qq";
                //#endif 

                //#ifdef MP-WEIXIN  
                type = "wx";
                //#endif   

                let data = { openid: _this.openid, unionid: _this.unionid, nickName: _this.nickName, headUrl: _this.avatarUrl, type: type }
                console.log(_this);
                common.requst(_this.URLs + '/api/applets/updateUserInfo', data, 'post').then(res => {

                    console.log(res);
                    res = res.data;

                    if (res.success == true) {
                        _this.type = "top"

                        _this.message = '登陆失败，请稍后再试！';
                        _this.$refs.popupMessage.open();
                        uni.setStorageSync('userid', res.data.id);
                        // #ifdef MP-QQ 
                        uni.setStorageSync('openid', res.data.qqopenid);

                        //#endif 

                        //#ifdef MP-WEIXIN  
                        uni.setStorageSync('openid', res.data.openid);
                        //#endif                        
                        uni.setStorageSync('username', res.data.name);
                        uni.setStorageSync("avatar", res.data.avatar);
                        uni.setStorageSync("userno", res.data.userno);
                        uni.reLaunch({//信息更新成功后跳转到小程序首页
                            url: '/pages/tabBar/news/news'
                        });
                    } else {
                        _this.type = "top"

                        _this.message = '登陆失败，请稍后再试！';
                        _this.$refs.popupMessage.open();

                    }



                });
                // uni.request({
                //     url:_this.URLs+'/api/applets/updateUserInfo' ,//服务器端地址
                //     data: {
                //         openid: _this.openid,
                //       unionid:_this.unionid,
                //         nickName: _this.nickName,
                //         headUrl: _this.avatarUrl
                //     },
                //     method: 'POST',
                //     header: {
                // 		'content-type': 'application/x-www-form-urlencoded'
                //     },
                //     success: (res) => {
                //         console.log(res);
                //         res=res. data;
                //                uni.reLaunch({//信息更新成功后跳转到小程序首页
                //                 url: '/pages/tabBar/news/news'
                //             });
                //         if (res.success == true) {
                //               uni.setStorageSync('userid', res.data.id);
                //               uni.setStorageSync('username', res.data.name);
                //               uni.setStorageSync("avatar",res.data.avatar);
                //              uni.setStorageSync("userno",res.data.userno);
                //             uni.reLaunch({//信息更新成功后跳转到小程序首页
                //                 url: '/pages/tabBar/news/news'
                //             });
                //         }
                //     }

                // });
            }
        },
        onLoad() {//默认加载
            try {
                var users = uni.getStorageSync("openid");
               var usersid = uni.getStorageSync("userid");
                if (users != null && users != ""&&usersid!=null&&usersid!="") {
                    uni.reLaunch({//信息更新成功后跳转到小程序首页
                        url: '/pages/tabBar/news/news'
                    });
                    return false;
                }
                this.login();
            } catch (e) {

            }



        }
    }
</script>
<style>
    .header {
        margin: 90rpx 0 90rpx 50rpx;
        border-bottom: 1px solid #ccc;
        text-align: center;
        width: 650rpx;
        height: 300rpx;
        line-height: 350rpx;
    }

    .header image,
    img {
        border-radius: 50%;
        width: 200rpx;
        height: 200rpx;
    }

    .content {
        margin-left: 50rpx;
        margin-bottom: 90rpx;
    }

    .content text {
        display: block;
        color: #9d9d9d;
        margin-top: 40rpx;
    }

    .bottom {
        border-radius: 80rpx;
        margin: 70rpx 50rpx;
        font-size: 35rpx;
    }
</style>